<template>
  <div class="profile">
    <form>
      <md-content>
        <md-field>
          <label>账号</label>
          <md-input v-model="username" readonly></md-input>
        </md-field>

        <md-field :class="nicknameERR" md-clearable>
          <label>昵称</label>
          <md-input required v-model="nickname"></md-input>
          <span class="md-error">不能为空</span>
        </md-field>
        <md-field :class="nameERR" md-clearable>
          <label>姓名</label>
          <md-input v-model="name"></md-input>
          <span class="md-error">不能为空</span>
        </md-field>

        <md-field :class="emailERR" md-clearable>
          <label>邮箱</label>
          <md-input
            required
            v-model="email"
            placeholder="zhangsan@126.com"
          ></md-input>
          <span class="md-error">不能为空</span>
        </md-field>
      </md-content>
      <md-button
@click="onSave"
class="md-raised md-primary"
        >修改并保存</md-button
      >
    </form>
    <!-- 跳转登录弹出框 -->
    <md-dialog-confirm
      :md-active.sync="showJumpAlert"
      md-title="跳转提示"
      :md-content="message"
      md-cancel-text="取消"
      md-confirm-text="去登录"
      @md-cancel="cancel"
      @md-confirm="jumpToLogin"
    />
    <md-snackbar
      md-position="center"
      :md-active.sync="showTipsbar"
      md-persistent
    >
      <span>{{ message }}!</span>
      <md-button
class="md-primary"
@click="showTipsbar = false"
        >关闭</md-button
      >
    </md-snackbar>
  </div>
</template>
<script>
import { logTimeOut } from '@/mixin'
import API from '@/api/api_user.js'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'TextFields',
  data: () => ({
    username: '',
    nickname: '',
    name: '',
    email: '',
    showTipsbar: false,
    message: ''
  }),
  mixins: [logTimeOut],
  computed: {
    ...mapState(['sessionInvalid', 'userInfo']),
    nicknameERR() {
      return {
        'md-invalid': !this.nickname.length
      }
    },
    emailERR() {
      return {
        'md-invalid': !this.email.length
      }
    },
    nameERR() {
      return {
        'md-invalid': !this.name.length
      }
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    onSave() {
      if (
        !this.nicknameERR['md-invalid'] &&
        !this.emailERR['md-invalid'] &&
        !this.nameERR['md-invalid']
      ) {
        this.changeProfile()
        this.setLoaclStorage()
      }
    },
    cancel() {
      this.showJumpAlert = false
      this.message = ''
    },
    jumpToLogin() {
      this.$router.push('/login')
    },
    changeProfile() {
      API.changeProfile({
        nickname: this.nickname,
        name: this.name,
        email: this.email
      })
        .then(res => {
          this.message = res.errmsg
          if (!res.errcode) {
            this.showTipsbar = true
          } else {
            this.showJumpAlert = true
          }
        })
        .catch(err => {
          this.showTipsbar = true
          this.message = err.errmsg
        })
    },
    setLoaclStorage() {
      const userInfo = JSON.parse(localStorage.getItem('access_user'))
      userInfo.username = this.username
      userInfo.name = this.name
      userInfo.email = this.email
      userInfo.nickname = this.nickname
      this.$store.commit('setUserInfo', userInfo)
      localStorage.setItem('access_user', JSON.stringify(userInfo))
    },
    fillForm() {
      const userInfo = JSON.parse(localStorage.getItem('access_user'))
      this.username = userInfo.username
      this.name = userInfo.name
      this.email = userInfo.email
      this.nickname = userInfo.nickname
    }
  },
  mounted() {
    this.fillForm()
  }
}
</script>
<style lang="less" scoped>
.md-content {
  width: 500px;
}
</style>
